<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="app">
			<post-list></post-list>
		</div>
	    
        <script type=text/javascript src="../../vue.js"></script>
        <script>
          const app = Vue.createApp({});
            // 子组件
        	const PostListItem = {
        		methods: {
        			handleVote(){
        				// 触发自定义事件
        				this.$emit('vote');
        			}
        		},
        		props: ['post'],
        	    template: `
        	        <li>
        	      		<p>
        	      			<span>标题：{{post.title}} | 发帖人：{{post.author}} | 发帖时间：{{post.date}} | 点赞数：{{post.vote}}</span>
        	      			<button @click="handleVote">赞</button>
        	      		</p>
        	      	</li>`
        	};
        	// 父组件
        	app.component('PostList', {
        		data() {
        			return {
        				posts: [
        					{id: 1, title: '《Servlet/JSP深入详解》怎么样', author: '张三', date: '2019-10-21 20:10:15', vote: 0},
        					{id: 2, title: '《VC++深入详解》观后感', author: '李四', date: '2019-10-10 09:15:11', vote: 0},
        					{id: 3, title: '《Java无难事》怎么样', author: '王五', date: '2020-11-11 15:22:03', vote: 0}
        				]
        			}
        		},
        		components: {
        		    PostListItem
        		},
        		methods: {
        			// 自定义事件vote的事件处理器方法
        			handleVote(id){
        				this.posts.map(item => {
        					item.id === id ? {...item, vote: ++item.vote} : item;
        				})
        			}
        		},
                template: `
        	      	<div>
        	      		<ul>
        	      			<PostListItem 
        	      				v-for="post in posts" 
        	      				:key="post.id" 
        	      				:post="post" 
        	      				@vote="handleVote(post.id)"/> <!--监听自定义事件-->
        	      		</ul>
        	      	</div>`
            });

            app.mount('#app');
        </script>
	</body>
</html>